<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务日志</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 搜索栏 -->
      <div class="query-form">
        <autumn-search :modelValue="queryInfo" @search="search">
          <template #default>
            <el-col :span="4">
              <el-form-item prop="modules" label="模块">
                <el-input v-model="queryInfo.modules" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="description" label="描述">
                <el-input v-model="queryInfo.description" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="createName" label="操作员">
                <el-input v-model="queryInfo.createName" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="status" label="状态">
                <el-select v-model="queryInfo.status" placeholder="请选择">
                  <el-option label="成功" value="1" />
                  <el-option label="失败" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </autumn-search>
      </div>

      <!-- 数据表格 -->
      <div class="main-body top">
        <autumn-table :page="page" @changePage="search">
          <template #column>
            <el-table-column type="index" label="#" fixed="left" align="center">
              <template #default="scope">
                {{ initIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column prop="modules" label="模块" />
            <el-table-column prop="description" label="描述" />
            <el-table-column label="状态" align="center" width="80">
              <template #default="scope">
                <el-tag type="success" size="small" v-if="scope.row.status == 1">成功</el-tag>
                <el-tag type="danger" size="small" v-else>失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="因由" show-overflow-tooltip />
            <el-table-column prop="createName" label="操作人" width="100" />
            <el-table-column prop="createTime" label="操作时间" width="150" align="center" />
          </template>
        </autumn-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import hooks from 'src/hook/index'
import { pageBusinessLog } from 'src/api/monitor/businessLog'

//分页查询
const queryInfo = reactive({
  modules: '',
  description: '',
  createName: '',
  status: ''
})
const { page, initIndex, search } = hooks.useTable((pageNumber: number, pageSize: number) => {
  pageBusinessLog({ ...queryInfo, pageNumber, pageSize }).then(({ data }) => {
    page.data = data.list
    page.total = data.total
  })
})

</script>

<style lang="scss" scoped></style>
